<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
    <meta name="hotcss" content="initial-dpr=1">
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <!--禁止uc浏览器判断到页面上文字居多时，自动放大字体。-->
    <meta name="wap-font-scale" content="no">
    <meta name="author" content="">
    <title>产品详情</title>
    <link rel="stylesheet" href="css/swiper-3.3.1.min.css"/>
    <link rel="stylesheet" href="css/css-reset.css"/>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/swiper-3.3.1.min.js"></script>
    <script src="js/basic.js"></script>
</head>
<body>

<!--头部-->
<header></header>



<div class="bread-nav">
    <div class="wrap clearfix">
        <a href="#">首页</a>
        <span>&gt;</span>
        <a href="#">车辆类型</a>
        <span>&gt;</span>
        <a class="on" href="#">进口车</a>
    </div>
</div>



<div class="product-detail">
    <div class="wrap">

        <div class="product-info clearfix">

            <div class="pi-left">

                <!--大图-->
                <div class="pi-big">
                    <div class="pi-big-box">
                        <img src="images/pd-b1.jpg" alt="">
                    </div>
                    <div class="pi-big-box">
                        <img src="images/pd-b2.jpg" alt="">
                    </div>
                    <div class="pi-big-box">
                        <img src="images/pd-b1.jpg" alt="">
                    </div>
                    <div class="pi-big-box">
                        <img src="images/pd-b2.jpg" alt="">
                    </div>
                    <div class="pi-big-box">
                        <img src="images/pd-b1.jpg" alt="">
                    </div>
                    <div class="pi-big-box">
                        <img src="images/pd-b2.jpg" alt="">
                    </div>
                </div>


                <!--缩略图-->
                <div class="pi-small">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="pi-small-box">
                                    <img src="images/pd-s1.jpg" alt="">
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="pi-small-box">
                                    <img src="images/pd-s2.jpg" alt="">
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="pi-small-box">
                                    <img src="images/pd-s3.jpg" alt="">
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="pi-small-box">
                                    <img src="images/pd-s4.jpg" alt="">
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="pi-small-box">
                                    <img src="images/pd-s5.jpg" alt="">
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

            </div>


            <div class="pi-right">
                <form action="pay1.html">
                    <div class="pir-title">
                        <h3>Mustang 2017款 2.3T美规自动挡标配</h3>
                        <p>2017款 标配 高配 另敞篷也有 颜色齐全 特惠来袭，港口批发价，参数配置、图片信息仅供参考，因汇率浮动实际价格信息请以实车并咨询客服后为准</p>
                    </div>

                    <div class="pir-price">
                        <div class="pp-guide clearfix">
                            <div class="clearfix">
                                <div class="pp-title">指导价</div>
                                <div class="pp-money pp-money1">￥12.79</div>
                            </div>

                            <div class="pp-tip">跨港通平行进口汽车节省0.56万</div>
                        </div>
                        <div class="pp-deposit clearfix">
                            <div class="clearfix">
                                <div class="pp-title">订金</div>
                                <div class="pp-money pp-money2">￥99</div>
                            </div>

                            <div class="pp-tip">预付订金享一对一定制服务</div>
                        </div>
                    </div>


                    <div class="pir-choose">
                        <table>
                            <tr>
                                <td width="32%">
                                    <div class="pirc-title">买车城市：</div>
                                </td>
                                <td width="68%">
                                    <select class="pirc-select" name="">
                                        <option value="">深圳</option>
                                        <option value="">广州</option>
                                        <option value="">东莞</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="pirc-title">选择车身颜色：</div>
                                </td>
                                <td>
                                    <select class="pirc-select" name="">
                                        <option value="">黑色</option>
                                        <option value="">白色</option>
                                        <option value="">蓝色</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="pirc-title">购买方式：</div>
                                </td>
                                <td>
                                    <div class="pirc-way clearfix">
                                        <div class="pric-way-box">
                                            <p>全款买车</p>
                                            <input class="pric-way-input" type="radio">
                                        </div>
                                        <div class="pric-way-box">
                                            <p>贷款买车</p>
                                            <input class="pric-way-input" type="radio">
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>

                    <div class="pir-buy">
                        <input class="pir-buy-btn" type="submit" value="立即抢购">
                    </div>
                </form>
            </div>

        </div>


        <div class="pd-content clearfix">
            <div class="pd-left">
                <div class="pdl-type clearfix">
                    <span class="on">购买说明</span>
                    <span>参数配置</span>
                </div>

                <div class="pd-desc">
                    <!--购买说明-->
                    <div class="pd-desc-list">
                        <div class="inner-p">
                            类型：美版
                            <br>

                            外观/内饰：蓝/米
                            <br>

                            配置：全景天窗、P01包、灯光包、外观包、停车辅助包、哈曼、二排电动、发光星标、方向盘加热、冷热杯架、轮锁、拖钩、后娱预留、魔幻雨刷
                            <br>
                            <br>
                            <img src="images/pd-dec-img.jpg" alt="">
                        </div>
                    </div>

                    <!--参数配置-->
                    <div class="pd-desc-list">
                        <div class="inner-p">
                            <table class="pd-desc-table">
                                <tr>
                                    <th colspan="2">商品属性</th>
                                </tr>
                                <tr>
                                    <td width="30%">级别</td>
                                    <td width="70%">SUV</td>
                                </tr>
                                <tr>
                                    <td>长*宽*高</td>
                                    <td>5130*1933*1850</td>
                                </tr>
                                <tr>
                                    <td>车身结构</td>
                                    <td>5门7座SUV</td>
                                </tr>
                                <tr>
                                    <td>轴距（mm）</td>
                                    <td>3075</td>
                                </tr>
                                <tr>
                                    <td>发动机</td>
                                    <td>3.0T 367马力 V6</td>
                                </tr>
                                <tr>
                                    <td>最大轴距</td>
                                    <td>500N`m@1800</td>
                                </tr>

                            </table>
                        </div>
                    </div>
                </div>

            </div>


        </div>


    </div>



</div>


<!--底部-->
<footer></footer>



<script>
    $(function () {

        //缩略图
        var mySwiper1 = new Swiper('.pi-small .swiper-container',{
            //loop: true,
            //autoplay : 1000,
            slidesPerView : 4,
            spaceBetween : 6,
            autoplayDisableOnInteraction : false
            //其他设置
        });



        //缩略图切换大图
        $('.pi-big .pi-big-box').eq(0).show();//默认第一个显示
        $('.pi-small-box').click(function () {
            var index=$(this).parent().index();
            //alert(index);

            $('.pi-big-box').hide();
            $('.pi-big .pi-big-box').eq(index).fadeIn();
        })


        //购买方式选择
        $('.pirc-way .pric-way-box').eq(0).addClass('on');//默认选中第一个
        $('.pric-way-box.on').find('.pric-way-input').attr("checked",true);
        $('.pric-way-box').click(function () {
            $('.pric-way-box').siblings().removeClass('on');
            $(this).addClass('on');

            $('.pric-way-box').siblings().find('.pric-way-input').attr("checked",false);
            $(this).find('.pric-way-input').attr("checked",true);

        })


        //商品详情切换
        $('.pdl-type span').eq(0).addClass('on');//默认第一个显示
        $('.pd-desc .pd-desc-list').eq(0).show();
        $('.pdl-type span').click(function () {
            var index=$(this).index();

            $('.pdl-type span').removeClass('on');
            $(this).addClass('on');
            $('.pd-desc-list').hide();
            $('.pd-desc .pd-desc-list').eq(index).show();

        })
    })


</script>





</body>
</html>